<template>
  <div id="SupplyAddrMatcher">
    <van-popup v-model="innerVisible"  class="pop-base-class" position="bottom" round style="background-color: #F5F5F5;" :close-on-click-overlay="false">
      <div class="pop-base-title">地址匹配</div>
      <div class="pop-base-content t-l">
        <p class="themeColor f-15 margin-bottom-8">当前地址匹配失败，请手动选择所在区域！</p>
        <van-cell-group>
          <van-cell value-class="f-grow-2" title="所在地区" :value="fieldText ? fieldText : '点击选择'" @click="getRegionList" />
        </van-cell-group>
      </div>
      <div class="pop-base-bottom flex">
        <van-button @click.stop="onClose" round plain type="danger" block color="var(--themeBaseColor)" style="height: 40px;margin-right: 8px;">关闭</van-button>
        <van-button @click.stop="submitMatcher" round type="danger" block color="var(--themeBaseColor)" style="height: 40px;">提交匹配</van-button>
      </div>
    </van-popup>

    <van-popup v-model="cascaderValuePop" get-container="#appMain" round position="bottom">
      <van-cascader v-model="cascaderValue" title="请选择所在地区" :field-names="fieldNames" :options="cascaderOptions" @close="cascaderValuePop = false" @change="onChange" @finish="onFinish" />
    </van-popup>
  </div>
</template>

<script>
import { Cascader } from "vant";
Vue.use(Cascader);
export default {
  name: "yz_supplyAddrMatcher",
  inheritAttrs: false,
  model: {
    prop: "visible",
    event: "change"
  },
  props: {
    // v-model绑定值
    visible: {
      type: Boolean,
      default: false
    },
    // 需要进行匹配的地址信息
    addr: {
      type: Object,
      default: () => {
        return {
          province: "",
          city: "",
          district: "",
          street: "",
          province_id: "",
          city_id: "",
          district_id: "",
          street_id: ""
        };
      }
    },
    // //弹出层默认挂载到组件所在位置，可以通过 get-container 属性指定挂载位置
    // getContainer: {
    //   type: string,
    //   default: ''
    // }
  },
  data() {
    return {
      innerVisible: this.visible,

      cascaderValuePop: false,
      fieldText: "",
      fieldNames: {
        text: "name",
        value: "id"
      },
      cascaderValue: "",
      cascaderOptions: []
    };
  },
  watch: {
    visible(val) {
      this.innerVisible = val;
    },
    innerVisible(val) {
      this.$emit("change", val);
    }
  },
  methods: {
    async getRegionList() {
      if(this.cascaderOptions.length > 0) {
        return this.cascaderValuePop = true;
      }
      let { result, msg, data } = await $http.get("plugin.yz-supply.frontend.index.index.getRegionList", {}, ".");
      if (result == 0) return this.$toast(msg);
      this.cascaderOptions = data.data.map((item, index) => ({
        ...item,
        index: index,
        children: [] // 初始化子节点
      }));
      this.$nextTick(() => {
        this.cascaderValuePop = true;
      });
    },
    async onChange({ value, selectedOptions, tabIndex }) {
      if (tabIndex == 0 && this.cascaderOptions[selectedOptions[tabIndex].index].children.length == 0) {
        let { result, msg, data } = await $http.get(
          "plugin.yz-supply.frontend.index.index.getRegionList",
          {
            parent_id: value
          },
          "."
        );
        if (result == 0) return this.$toast(msg);
        this.cascaderOptions[selectedOptions[0].index].children = data.data.map((item, index) => ({
          ...item,
          index: index,
          children: [] // 初始化子节点
        }));
      } else if (tabIndex === 1) {
        let { result, msg, data } = await $http.get(
          "plugin.yz-supply.frontend.index.index.getRegionList",
          {
            parent_id: value
          },
          "."
        );
        if (result == 0) return this.$toast(msg);
        this.cascaderOptions[selectedOptions[0].index].children[selectedOptions[1].index].children = data.data.map((item, index) => ({
          ...item,
          index: index,
          children: [] // 初始化子节点
        }));
      } else if (tabIndex === 2) {
        let { result, msg, data } = await $http.get(
          "plugin.yz-supply.frontend.index.index.getRegionList",
          {
            parent_id: value
          },
          "."
        );
        if (result == 0) return this.$toast(msg);
        this.cascaderOptions[selectedOptions[0].index].children[selectedOptions[1].index].children[selectedOptions[2].index].children = data.data.map((item, index) => ({
          ...item
        }));
      }
    },
    onFinish({ selectedOptions }) {
      this.cascaderValuePop = false;
      this.fieldValue = selectedOptions.map(option => option.id);
      this.fieldTextArr = selectedOptions.map(option => option.name);
      this.fieldText = selectedOptions.map(option => option.name).join("/");
    },

    async submitMatcher() {
      if (this.fieldValue.length == 0) {
        this.$toast("请选择地址");
        return;
      }
      //需要将this.addr进行decodeURIComponent解码，并且JSON.parse
      let addr = {};
      try {
        addr = JSON.parse(decodeURIComponent(this.addr));
      } catch (error) {
        console.log(error);
      }
      let { province_id, city_id, district_id, street_id, province, city, district, street } = addr;
      let { result, msg, data } = await $http.post(
        "plugin.yz-supply.frontend.index.index.createAddressMatching",
        {
          province_id: province_id,
          city_id: city_id,
          district_id: district_id,
          street_id: street_id,
          middle_province_id: this.fieldValue[0],
          middle_city_id: this.fieldValue[1],
          middle_district_id:  this.fieldValue[2],
          middle_street_id: this.fieldValue[3],
          province: province,
          city: city,
          district: district,
          street: street,
          middle_province: this.fieldTextArr[0],
          middle_city: this.fieldTextArr[1],
          middle_district: this.fieldTextArr[2],
          middle_street: this.fieldTextArr[3]
        },
        "."
      );
      if (result == 0) return this.$toast(msg);
      this.innerVisible = false;
      this.$emit('success',{});
    },
    onClose(){
      this.innerVisible = false;
      this.$emit('close',{});
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.pop-base-class {
  .pop-base-title {
    margin: 18px 12px 12px;
    font-size: 1.15rem;
    font-weight: bold;
    text-align: left;
  }
  .pop-base-content {
    min-height: 45vh;
    max-height: 55vh;
    overflow: scroll;
    padding: 0 0.75rem 5rem;
  }
  .pop-base-bottom {
    padding: 0.625rem 0.875rem;
    background: #ffffff;
  }
}
</style>
